import { onMounted, onBeforeUnmount } from "vue";
import { ref } from "vue"
import * as echarts from 'echarts'
import _ from 'lodash'
import type { ECharts, EChartsOption } from "echarts"
function useEchart<T = EChartsOption>(dom: HTMLAreaElement | any, options: any) {
    const myChart = ref<ECharts>()
    onMounted(() => {
        const instance = echarts.init(dom.value)
        myChart.value = instance
        instance.setOption(options)
        window.addEventListener("resize", resizeHandler)
    })
    onBeforeUnmount(() => {
        window.removeEventListener("resize", resizeHandler);
    });

    const resizeHandler = _.debounce(() => {
        if (myChart.value) {
            myChart.value.resize(
                {
                    animation: {
                        easing: 'linear',
                        duration: 500
                    }
                }
            );
        }
    }, 200);
    return {
        myChart
    }
}
export default useEchart

